<template>
  <div class="point-container">
    <el-row :gutter="20">
      <el-col>
        <el-form
          ref="ruleForm"
          class="demo-ruleForm"
          label-width="100px"
          :model="ruleForm"
          :rules="rules"
        >
          <el-form-item label="每日赠送积分" label-width="120px" prop="number">
            <el-col :span="11">
              <el-input v-model.number="ruleForm.number" placeholder="20" />
            </el-col>
            <el-col class="el-form-item__label" :span="1">分</el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { doEdit, getPrizeList } from '@/api/configration'
  export default {
    name: 'Test',
    data() {
      return {
        show: true,
        apiData: {},
        ruleForm: {
          number: '',
        },
        rules: {
          number: [
            { required: true, message: '请输入每日赠送积分', trigger: 'blur' },
            {
              type: 'number',
              message: '每日赠送积分必须为整数数字',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    created() {
      this.fetchData()
    },
    mounted() {},
    methods: {
      async fetchData() {
        this.listLoading = true
        const { data } = await getPrizeList(this.queryForm)
        if (data && typeof data === 'object') {
          this.apiData = data
          const { score } = data
          this.ruleForm.number = score
        }

        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },

      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const props = {
              configValue: { ...this.apiData, score: this.ruleForm.number },
              configItem: 'prizeConfig',
            }
            console.log('传递参数---', props, this.$options)
            const { error, data } = await doEdit(props).catch(() => {
              this.$baseMessage(error || '接口错误', 'error')
            })
            if (error) {
              this.$baseMessage(error || '接口错误', 'error')
            } else {
              this.$baseMessage('操作成功', 'success')
            }
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>
